<template>
  <div id="ContactUs" class="u-flex-col">
    <el-popover placement="left" :width="70" trigger="hover">
      <template #reference>
        <div style="text-align: center">
          <img
            src="@/assets/img/wechat.png"
            style="width: 35px; height: 35px; margin: 10px 5px"
            alt=""
            srcset=""
          />
        </div>
      </template>
      <div class="u-text-center">
        <img :src="connectInfo.wechat" style="width: 100%" />
      </div>
    </el-popover>

    <div style="height: 1px; background-color: white"></div>
    <!-- <div ></div> -->
    <div style="text-align: center">
      <img
        src="@/assets/img/goTop.png"
        @click="GoTop()"
        style="width: 30px; height: 35px; margin-top: 10px"
        alt=""
        srcset=""
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import homeApi from "@/api/home";

let connectInfo = reactive({});
const flag = ref(false);
function GoTop() {
  (function smoothscroll() {
    var currentScroll =
      document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
      window.requestAnimationFrame(smoothscroll);
      window.scrollTo(0, currentScroll - currentScroll / 10);
    }
  })();
}

onMounted(() => {
  homeApi.getconnectUS().then((res) => {
    console.log(res);
    // Object.assign(bannerList, res.data);
    Object.assign(connectInfo, res.data);
  });
});
</script>

<style scoped>
#ContactUs {
  position: fixed;
  background-color: #846c54;
  right: 20px;
  bottom: 50%;
  z-index: 99999999;
  cursor: pointer;
}

#GoTop > span {
  display: block;
  width: 100%;
  height: 100%;
  color: rgb(8, 162, 233);
  font-size: 30px;
}
</style>
